<template>
  <div class="video-player">
    <component
      v-if="resourceData.id"
      :is="syncComponent"
      v-bind="resourceData"
    />
    <!-- <polyv-player
      v-if="playerType === 'polyv'"
      :vid="vid"
    ></polyv-player>
    <aliyun-player
      v-else
      :vid="vid"
      :play-auth="playAuth"
    ></aliyun-player> -->
    <!-- <div class="player-other">
    </div>
    <div class="player-other">
    </div> -->
    <div
      class="player-shade"
      v-if="showShade"
    >
      试看
    </div>
  </div>
</template>

<script>
import PlayAuth from '@/api/playerAuth/index';
import AliyunPlayer from './components/AliyunPlayer.vue';
import PolyvPlayer from './components/PolyvPlayer.vue';
// import ControllerPlayer from './components/ControllerPlayer.vue';

export default {
  name: 'IbdVideoPlayer',
  provide() {
    return { topPlayer: this };
  },
  props: {
    resourcesId: {
      type: Number,
      default: 0,
    },
    resourcesType: {
      type: String,
      default: '',
    },
  },
  computed: {
    syncComponent() {
      return this.resourceData.videoSrcType === 'polyv'
        ? 'PolyvPlayer'
        : 'AliyunPlayer';
    },
  },
  components: {
    PolyvPlayer,
    AliyunPlayer,
  },
  data() {
    return {
      showShade: false,
      resourceData: {},
      videoSrcType: 'ploy', // ali, ploy
      playerType: null, // 类型
      vid: null,
      playAuth: null,
      options: {
        // 试看
        preview: {
          allow: true,
          previewTime: 30,
        },
        // 添加图片广告
        advertising: {
          allow: true,
          args: [{ type: 'start', path: '' }, { type: 'pause', path: '' }],
        },
        // 添加视频广告
        adVideoSource: {
          allow: true,
          data: {
            link: 'www.baidu.com',
            sourceLink: 'https://player.alicdn.com/ad/citybrain.mp4',
          },
        },
        // 弹幕
        barrage: {
          allow: true,
        },
        // 倍速播放
        speedSelector: {
          allow: true,
        },
        // 清晰度
        definition: {
          allow: true,
        },
        // 截图
        snapshot: {
          allow: true,
        },
        // 视频弹题检测   自定义
      },
    };
  },
  mounted() {
    this.getResourceDetail();
  },
  methods: {
    onPreviewEnd() {
      this.showShade = true;
    },
    goLogin() {},
    goRegister() {},
    getResourceDetail() {
      setTimeout(() => {
        this.resourceData = {
          id: 1,
          name: 'xxxxx',
          type: 1, // 1, 音视频， 2：作业，3：测验，4：资料
          vid: '812a792458db8ae8ffe188158d935512_8',
          playAuth: '',
          videoSrcType: 'polyv', // polyv , ali
          previewTimelong: '',
          aaa: '',
          bbb: '',
        };
      }, 500);
    },
    // 根据resourcesId， resourcesType 获取播放资源
    getPlayerData() {
      if (this.resourcesType === 'mooc') {
        PlayAuth.getPlayerResource({
          resource_id: this.resourcesId,
          type: this.resourcesType,
        }).then((rec) => {
          this.playerType = 'aliyun';
          this.vid = rec.VideoMeta.VideoId;
          this.playAuth = rec.PlayAuth;
        });
      } else if (this.resourcesType === 'polyv') {
        setTimeout(() => {
          this.playerType = 'polyv';
          this.vid = '812a792458db8ae8ffe188158d935512_8';
          this.playAuth = null;
        }, 0);
      }
    },
  },

  watch: {
    resourcesId() {
      // this.getPlayerData();
    },
  },
};
</script>

<style lang="scss" scoped>
.video-player {
  width: 100%;
  min-width: 700px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .player-other {
    width: 100%;
    height: 100%;
  }
  .controller-solt {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .player-shade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    z-index: 2;
  }
}
</style>
